<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form inline query label-width="85px" :model="queryParams" :form-item="queryFormItem" :search-fn="() => refTable.reload()" />
		</div>
		<div class="flex-auto flex-col m-t-10 system-page-background b-radius-4">
			<div v-hasPermi="['system:logininfor:remove', 'system:logininfor:export']" class="p-10">
				<my-button-export v-hasPermi="['system:logininfor:export']" :load="Export" :disabled="!state.list.length" />
				<el-button
					v-hasPermi="['system:logininfor:remove']"
					type="danger"
					:disabled="!tableSelection.length"
					icon="Delete"
					@click.prevent="deleteFn(tableSelection)"
				>
					删除
				</el-button>
			</div>
			<my-list-panel ref="refTable" :load-fn="loadData" :total="state.total">
				<template #default="{ page, size }">
					<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
						<template #index="{ $index }">
							{{ $index + 1 + (page - 1) * size }}
						</template>
					</my-table>
				</template>
			</my-list-panel>
		</div>
	</div>
</template>

<script setup name="logininfor">
import { pageLogininfor, removeLogininfor, exportLogininfor } from '@/api/system';
import { downloadBlob } from '@u/download';

const queryFormItem = [
	{ prop: 'likeIpaddr', label: '登录地址' },
	{ prop: 'likeUserName', label: '用户名称' },
	{ prop: 'likeBrowser', label: '浏览器类型' },
	{ prop: 'likeOs', label: '操作系统' },
	{ itemType: 'select', list: $store.dict.sysCommonStatus, prop: 'status', label: '状态' },
	{
		itemType: 'date',
		type: 'datetimerange',
		rangeSeparator: '至',
		startPlaceholder: '开始日期',
		endPlaceholder: '结束日期',
		prop: 'dateRange',
		prepend: 'LoginTime',
		label: '登录时间'
	}
];

const { queryParams, refTable, state, tableSelection, loadData, deleteFn } = pageMixin({
	queryFormItem,
	columns: [
		{
			type: 'selection'
		},
		{
			label: '序号',
			width: '80',
			prop: 'index'
		},
		{
			label: '访问编号',
			prop: 'id'
		},
		{
			label: '登录地址',
			prop: 'ipaddr',
			width: 150
		},
		{
			label: '登录地点',
			prop: 'loginLocation'
		},
		{
			label: '用户名称',
			prop: 'userName'
		},
		{
			label: '浏览器类型',
			prop: 'browser'
		},
		{
			label: '操作系统',
			prop: 'os'
		},
		{
			label: '状态',
			prop: 'status',
			formatter: (row) => selectDictLabel($store.dict.sysCommonStatus, row.status)
		},
		{
			label: '描述',
			prop: 'msg'
		},
		{
			label: '访问时间',
			prop: 'loginTime',
			width: 180
		}
	],
	api: { page: pageLogininfor, remove: removeLogininfor }
});
// 初始化执行逻辑
$store.dict.GETsysCommonStatus();

/** 导出按钮操作 */
function Export() {
	return exportLogininfor(addDateRange(queryParams.value, 'dateRange', 'LoginTime')).then((data) => {
		downloadBlob(data, '登录日志.xlsx');
	});
}
</script>
